/* Firefox userChrome.css tweaks ********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

/* This code won't work for all buttons the same way. There are still too many different *
** types and button variations out there to catch all of them with general code. ********/


:root {
  --space_required_for_appbutton_fix: 46px !important;
}

:root[uidensity="compact"] {
  --space_required_for_appbutton_fix: 36px !important;
}

:root[uidensity="touch"] {
  --space_required_for_appbutton_fix: 50px !important;
}

:root{
  --toolbar-start-end-padding: 2px !important;
}


/* compact button mode */
#main-window[uidensity=compact] #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
#main-window[uidensity=compact] #nav-bar .toolbarbutton-1 .toolbarbutton-badge-stack {
  width: 32px !important;
  height: 26px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

#main-window[uidensity=compact] #nav-bar #PanelUI-menu-button .toolbarbutton-icon {
  margin-inline-start: 2px !important;
}

#main-window[uidensity=compact] #nav-bar #fxa-toolbar-menu-button .toolbarbutton-badge-stack {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
#main-window[uidensity=compact] #nav-bar #downloads-button #downloads-indicator-anchor {
  margin-left: 2px !important;
  margin-right: 2px !important;
}
#main-window[uidensity=compact] #nav-bar .webextension-browser-action .toolbarbutton-icon {
  margin-left: 2px !important;
  margin-right: 2px !important;
}
#main-window[uidensity=compact] #nav-bar :is(#add-ons-button,#unified-extensions-button,#zoom-out-button,#zoom-in-button) .toolbarbutton-icon {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

#main-window[uidensity=compact] #nav-bar #stop-reload-button .toolbarbutton-animatable-box,
#main-window[uidensity=compact] #nav-bar #nav-bar-overflow-button .toolbarbutton-animatable-box {
  margin-left: 6px !important;
  margin-right: 6px !important;
}

#main-window[uidensity=compact] #nav-bar #zoom-reset-button .toolbarbutton-text {
  min-height: 26px !important;
}

/* fix for toolbar button badges */
#main-window[uidensity=compact] #nav-bar .toolbarbutton-1 .toolbarbutton-badge {
  margin-top: -5px !important;
}


/* normal button mode */
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar .toolbarbutton-1 .toolbarbutton-badge-stack {
  width: 40px !important;
  height: 30px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #PanelUI-menu-button .toolbarbutton-icon {
  margin-inline-start: 5px !important;
}

#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #fxa-toolbar-menu-button .toolbarbutton-badge-stack {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  padding-left: 11px !important;
  padding-right: 11px !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #downloads-button #downloads-indicator-anchor {
  margin-left: 6px !important;
  margin-right: 6px !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar .webextension-browser-action .toolbarbutton-icon {
  margin-left: 6px !important;
  margin-right: 6px !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #back-button .toolbarbutton-icon{
  padding: 9px !important;
  height: 34px !important;
  width: 34px !important;
}
#main-window:not([uidensity=compact]):not([uidensity=touch])  #nav-bar :is(#add-ons-button,#unified-extensions-button,#zoom-out-button,#zoom-in-button) .toolbarbutton-icon {
  padding-left: 11px !important;
  padding-right: 11px !important;
}

#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #nav-bar-overflow-button .toolbarbutton-animatable-box,
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #stop-reload-button .toolbarbutton-animatable-box {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar #zoom-reset-button .toolbarbutton-text {
  min-height: 30px !important;
}

/* fix for toolbar button badges */
#main-window:not([uidensity=compact]):not([uidensity=touch]) #nav-bar .toolbarbutton-1 .toolbarbutton-badge {
  margin-top: -6px !important;
  margin-inline-end: -5px !important;
}


/* touch button mode */
#main-window[uidensity=touch] #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
#main-window[uidensity=touch] #nav-bar .toolbarbutton-1 .toolbarbutton-badge-stack {
  width: 46px !important;
  height: 32px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
#main-window[uidensity=touch] #nav-bar #PanelUI-menu-button .toolbarbutton-icon {
  margin-inline-start: 6px !important;
}
#main-window[uidensity=touch] #nav-bar #fxa-toolbar-menu-button .toolbarbutton-badge-stack {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}
#main-window[uidensity=touch] #nav-bar #downloads-button #downloads-indicator-anchor {
  margin-left: 6px !important;
  margin-right: 6px !important;
}
#main-window[uidensity=touch] #nav-bar .webextension-browser-action .toolbarbutton-icon {
  margin-left: 6px !important;
  margin-right: 6px !important;
}
#main-window[uidensity=touch] #nav-bar #back-button .toolbarbutton-icon{
  padding: 12px !important;
  height: 40px !important;
  width: 40px !important;
}
#main-window[uidensity=touch]  #nav-bar :is(#add-ons-button,#unified-extensions-button,#zoom-out-button,#zoom-in-button) .toolbarbutton-icon {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

#main-window[uidensity=touch] #nav-bar #stop-reload-button .toolbarbutton-animatable-box,
#main-window[uidensity=touch] #nav-bar #nav-bar-overflow-button .toolbarbutton-animatable-box{
  margin-left: 14px !important;
  margin-right: 14px !important;
}

#main-window[uidensity=touch] #nav-bar #stop-reload-button .toolbarbutton-animatable-box,
#main-window[uidensity=touch] #nav-bar #nav-bar-overflow-button .toolbarbutton-animatable-box{
  margin-left: 13px !important;
  margin-right: 13px !important;
}

#main-window[uidensity=touch] #nav-bar #zoom-reset-button .toolbarbutton-text {
  min-height: 32px !important;
}

/* fix for toolbar button badges */
#main-window[uidensity=touch] #nav-bar .toolbarbutton-1 .toolbarbutton-badge {
  margin-top: -6px !important;
  margin-inline-end: -5px !important;
}

#reload-button > .toolbarbutton-animatable-box,
#stop-button > .toolbarbutton-animatable-box {
  top: calc(50% - 10px) !important;
}

